<template>
  <div class="help">
    <div class="daohan">
      <dao-han :daohan_index="3"></dao-han>
    </div>
    <div class="daoh">
      <p :class="active==1?'active':''"
         @click="daohan(1)">发起救助</p>
      <p :class="active==2?'active':''"
         @click="daohan(2)">等待救助</p>
      <p :class="active==3?'active':''"
         @click="daohan(3)">救助中</p>
      <p :class="active==4?'active':''"
         @click="daohan(4)">救助记录</p>
    </div>
    <div>
      <router-view></router-view>
    </div>

  </div>
</template>  
  
<script>
import { ref, onMounted } from 'vue'
import DaoHan from '@/components/daohan/DaoHan.vue'
// import { ElMessage } from 'element-plus' // 假设你需要用到Element Plus的消息提示，如果不需要可以移除
import { useRouter } from 'vue-router'

export default {
  components: {
    DaoHan
  },
  setup() {
    const router = useRouter()
    let active = ref(1)
    let daohan = (i) => {
      active.value = i
      if (i == 1) {
        localStorage.setItem('jiuz', 1)
        router.push('/help')
      } else if (i == 2) {
        router.replace('/help/dengdai')
        localStorage.setItem('jiuz', 2)
      } else if (i == 3) {
        router.replace('/help/jiuzhong')
        localStorage.setItem('jiuz', 3)
      } else if (i == 4) {
        router.replace('/help/wanjiu')
        localStorage.setItem('jiuz', 4)
      }
    }
    onMounted(() => {
      if (localStorage.getItem('jiuz') != 1) {
        localStorage.setItem('jiuz', 1)
        router.replace('/help')
      }
      setInterval(() => {
        active.value = localStorage.getItem('jiuz')
      }, 10)
    })
    return {
      active,
      daohan
    }
  }
}
</script>  
  
<style scoped lang="less">
/* 如果需要，可以在这里添加样式 */
.help {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  // padding-top: 80px;

  .daohan {
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: 3;
  }

  .daoh {
    width: 1000px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    // background-color: #eeecde;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    p {
      cursor: pointer;
      width: 200px;
      height: 50px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eeecde;
      border-bottom: #cdbf62 3px solid;
      border-top: #cdbf62 1px dashed;
      border-left: #cdbf62 1px solid;
      border-right: #cdbf62 1px solid;
      border-radius: 15px;
      &:hover {
        background-color: #eee;
      }
    }
    .active {
      cursor: pointer;
      width: 200px;
      height: 50px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: radial-gradient(ellipse, #eeecde, #cdbf62);
      border-bottom: #cdbf62 3px solid;
      border-top: #cdbf62 1px dashed;
      border-left: #cdbf62 1px solid;
      border-right: #cdbf62 1px solid;
    }
  }

  .xia {
    .img1 {
      width: 600px;
      height: 850px;
    }
  }
  .jiuzhu {
    width: 1200px;
    height: 200px;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    line-height: 200px;
    color: #333333;
    border-radius: 25%;
    background-color: #eeecde;
    border-bottom: #cdbf62 6px solid;
    border-left: #cdbf62 4px solid;
    border-right: #cdbf62 4px dashed;
    border-top: #cdbf62 4px dashed;
    span {
      margin: 0 20px;
    }
  }
}
</style>